<template>
	<view class="container">
		<!-- Logo区域 -->
		<view class="logo-section">
			<image class="main_logo" src="/static/main_logo.png"></image>
		</view>
		
		<!-- 登录表单区域 -->
		<view class="login-form">
			<!-- 手机号输入框 -->
			<view class="input-group">
				<input 
					class="input-field" 
					type="number" 
					:placeholder="$t('login.pleaseEnterPhone')"
					v-model="phone"
					maxlength="11"
					:disabled="codeDisabled"
					:class="{disabled: codeDisabled}"
				/>
			</view>
			
			<!-- 验证码输入框 -->
			<view class="input-group code-group">
				<input 
					class="input-field" 
					type="number" 
					:placeholder="$t('login.pleaseEnterCaptcha')"
					v-model="captcha"
					maxlength="6"
				/>
				<text class="get-code-text" @click="getCaptcha" :class="{disabled: codeDisabled}">
					{{codeText}}
				</text>
			</view>
			
			<!-- 登录按钮 -->
			<button class="login-btn" @click="handleLogin">{{ $t('login.immediatelyLogin') }}</button>
			
			<!-- 协议同意 -->
			<view class="agreement-section">
				<checkbox-group @change="agreementChange">
					<label class="agreement-label">
						<checkbox value="agree" :checked="isAgreed" color="#4A90E2" style="transform:scale(0.6);z-index: 999;"/>
						<text class="agreement-text">
							{{ $t('login.iHaveReadAndAccepted') }} 
							<text class="link-text" @click.stop="navigateToServiceAgreement">{{ $t('login.serviceAgreement') }}</text> 
							{{ $t('login.and') }} 
							<text class="link-text" @click.stop="navigateToPrivacyPolicy">{{ $t('login.privacyPolicy') }}</text>
						</text>
					</label>
				</checkbox-group>
			</view>
		</view>
		
		<!-- 底部背景和技术支持 -->
		<view class="footer">
			<image class="bg-image" src="/static/login-bg.png" mode="aspectFill"></image>
			<view class="support-logos">
				<image class="volc-logo" src="/static/login-logo.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../js/api'
	
	export default {
		data() {
			return {
				phone: '',
				captcha: '',
				isAgreed: false,
				codeDisabled: false,
				codeText: this.$t('login.getCaptcha'),
				countdown: 60
			}
		},
		methods: {
			// 获取验证码
			getCaptcha() {
				if (this.codeDisabled) return
				if (!this.phone) {
					uni.showToast({
						title: this.$t('login.pleaseEnterPhone'),
						icon: 'none'
					})
					return
				}
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: this.$t('login.pleaseEnterCorrectPhone'),
						icon: 'none'
					})
					return
				}
				
				this.startCountdown()
				// 调用发送验证码API
				api.sendCaptcha(this.phone).then(res => {
					console.log('sendCaptcha: ', res)
					if (res.code === 200) {
						uni.showToast({
							title: this.$t('login.captchaSendSuccess'),
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: res.msg || this.$t('login.captchaSendFail'),
							icon: 'none'
						})
					}
				})
			},
			
			// 倒计时
			startCountdown() {
				this.codeDisabled = true
				this.countdown = 60
				this.codeText = `${this.countdown}s`
				
				const timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						clearInterval(timer)
						this.codeDisabled = false
						this.codeText = this.$t('login.getCaptcha')
					} else {
						this.codeText = `${this.countdown}s`
					}
				}, 1000)
			},
			
			// 协议同意状态改变
			agreementChange(e) {
				this.isAgreed = e.detail.value.length > 0
			},
			
			// 处理登录
			handleLogin() {
				if (!this.phone) {
					uni.showToast({
						title: this.$t('login.pleaseEnterPhone'),
						icon: 'none'
					})
					return
				}
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: this.$t('login.pleaseEnterCorrectPhone'),
						icon: 'none'
					})
					return
				}
				if (!this.captcha) {
					uni.showToast({
						title: this.$t('login.pleaseEnterCaptcha'),
						icon: 'none'
					})
					return
				}
				if (!this.isAgreed) {
					uni.showToast({
						title: this.$t('login.pleaseAgreeServiceAgreementAndPrivacyPolicy'),
						icon: 'none'
					})
					return
				}
				
				uni.showLoading({
					title: this.$t('login.loggingIn'),
				})
				
				api.login(this.phone, this.captcha).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						uni.setStorageSync('sy-token', res.data.tokenValue)
						uni.setStorageSync('userInfo', {
							id: res.data.userId,
							phone: res.data.loginId,
							username: res.data.username,
							avatar: res.data.avatar
						})
						uni.showToast({
							title: this.$t('login.loginSuccess'),
							icon: 'success'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabbar/device'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg || this.$t('login.loginFail'),
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: this.$t('login.networkException, please try again'),
						icon: 'none'
					})
				})
			},
			navigateToServiceAgreement() {
				uni.navigateTo({
					url: '/pages/login/serviceagreement'
				})
			},
			navigateToPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/me/privacyagreement'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	padding: 0 30px;
	position: relative;
}

.logo-section {
	display: flex;
	justify-content: center;
	padding-top: 80px;
	
	.main_logo {
		margin-top: 50px;
		width: 215.5px;
		height: 234.75px;
	}
}

.login-form {
	flex: 1;
	
	.input-group {
		margin-bottom: 20px;
		
		.input-field {
			height: 48px;
			background-color: #F3F3F3;
			border-radius: 8px;
			border: none;
			padding: 0 15px;
			font-size: 16px;
			color: #333;
			
			&::placeholder {
				color: #B4B4B4;
			}
			
			&.disabled {
				background-color: #E5E5E5;
				color: #999;
			}
		}
		
		&.code-group {
			position: relative;
			
			.input-field {
				padding-right: 90px;
			}
			
			.get-code-text {
				position: absolute;
				right: 15px;
				top: 50%;
				transform: translateY(-50%);
				color: #0256FF;
				font-size: 16px;
				font-weight: 600;
				white-space: nowrap;
				z-index: 10;
				
				&.disabled {
					color: #ccc;
				}
			}
		}
	}
	
	.login-btn {
		z-index: 999;
		height: 48px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #0256FF;
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 14px;
		margin-bottom: 10px;
		
		&::after {
			border: none;
		}
	}
	
	.agreement-section {

		z-index: 999;
		
		.agreement-label {
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			
			
			.agreement-text {
				z-index: 999;
				font-size: 13px;
				color: #666666;
				
				.link-text {
					z-index: 999;
					margin: 0 4px;
					color: #0256FF;
				}
			}
		}
	}
}

.footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 150px;
	
	.bg-image {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 280px;
		z-index: 1;
	}
	
	.support-logos {
		position: absolute;
		bottom: 100px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 40px;
		
		.volc-logo {
			width: 280px;
			height: 66px;
			opacity: 1;
			mix-blend-mode: multiply;
		}
		
	}
	
}
</style>
